<template>
<!--  多组计算回转分区独有不同参数下反应时间-->
  <div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

export default {
  props: {
    variable:{
      type:String,
    },
    caculateResult: {
      type: Array,
      default: function () {
        return [];
      },
    },
    Argument:{
      type:String,
      default:""
    },
    Legend:{
      type:Array,
      default: function () {
        return [];
      },
    },
  },
  setup(props) {
    const chart = ref(null);
    console.log("props.variable",props.variable);
    onMounted(() => {
      const chartInstance = echarts.init(chart.value);
      const seriesData = [];
      let xData = []; // 初始化为一个数组
      console.log("props.caculateResult",props.caculateResult);


      props.caculateResult.forEach((dataItem, index) =>
      {
        const rawData = dataItem.data;
        // xData = Object.keys(rawData)[0];
        //     .map(
        //     (key) => parseFloat(key.match(/\d+/)[0]) - 273
        // );
        xData = Object.keys(rawData).map((key) => {

          const matchResult = key.match(/\d+/);
          if (matchResult) {
            return parseFloat(matchResult[0]) - 273;
          } else {
            // 处理无法匹配到数字的情况，这里你可以返回默认值或者采取其他适当的措施
            return 0; // 例如，返回默认值 0
          }
        });
        console.log("xData",xData)

        const yData = Object.values(rawData).map((item) => item.result);

        // const yData = rawData[xData].result
        // Object.values(rawData).map((item) => item.result);
        console.log("yData",yData)

        seriesData.push({
          name: `${props.Argument}-${props.Legend[index]}`, //
          type: "line",
          data: yData,
          label: {
            formatter: `{c0}`,
          },
        });


      });

      const option = {
        tooltip: {
          trigger: "axis",
          // formatter: "铀浓度：{c0} (g·L^-1)",
          formatter: function(params) {
            var tooltipText =
                props.variable!=='temp_list'?
                '温度：' + params[0].name + '℃' + '<br>'
                :''; // 初始化提示框文本
            // 遍历数据项，添加系列名称、颜色和数据项名称
            for (var i = 0; i < params.length; i++) {
              var seriesName = params[i].seriesName; // 获取系列名称
              var color = params[i].color; // 获取数据项颜色
              var dataName = params[i].value; // 获取数据项名称
              tooltipText += '<span style="color:' + color + '">&#9679;</span> ' + seriesName + ' : ' + dataName + '<br>';
            }
            return tooltipText;
          },
          // formatter: function(params) {
          //   var result = '';
          //   for (var i = 0; i < params.length; i++) {
          //     result +=  '温度: ' + params[i].name +' ℃' + '<br />';
          //     result +=  '溶解时间 : ' + params[i].value + ' min' + '<br />';
          //   }
          //   return result;
          // },
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: '#fff', // 悬浮框背景色
          borderColor: '#409EFF', // 悬浮框边框颜色
          borderWidth: 1, // 悬浮框边框宽度
          textStyle: { // 悬浮框文字样式
            color: '#000',
            fontSize: 12
          }

        },
        xAxis: {
          type: "category",
          data: xData,
          name: "系统温度/℃",
          axisLabel: {
            // show:false
            show:props.variable!=='temp_list',
            formatter: function(value) {
              return parseFloat(value).toFixed(2); // 保留两位小数
            }
          }
        },
        yAxis: {
          type: "value",
          name: "溶解时间/min",
        },
        legend: {},
        series: seriesData,
      };

      chartInstance.setOption(option);
    });

    return {
      chart,
    };
  },
};
</script>

<style>

</style>
